<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="CYW">
     <link rel="stylesheet" href="千图网.css"> 
    <title></title>
</head>

<body>
    <header class="header-one">
        <section class="header-lr">

            <div class="header-left">
                <a href="">首页</a>
                <a href="">所有分类</a>&nbsp;&#8744;
                <a href="">创意设计</a>
                <a href="">办公创意</a>
                <a href="">●●●</a>
            </div>
            <div class="header-right">
                <a href="#"><span class="zs"></span>VIP中心</a>
                <a href="#">请登录</a>
                <a href="#">免费注册</a>
            </div>
        </section>
    </header>

    <header class="header-two">
        <div class="header-twobox">
            <section class="qiantuwang">
                <img class="qiantu-logo" src="./img2/111.png" alt="">
            </section>
            <section class="reshou">
                <div>
                    <div class="shousuo">
                        <span class="quanzhan">全站&nbsp;&#8744;&nbsp;</span>
                        <input type="text" class="search-block" placeholder="&nbsp;800万免费设计素材任意下载">
                    </div>

                    <div class="search-bottom">热门搜索:
                        <a href="#">七夕</a>
                        <a href="#">详细页</a>
                        <a href="#">icon</a>
                        <a href="#">主图</a>
                        <a href="#">秋季</a>
                        <a href="#">PPT模版</a>
                        <a href="#">EXCEL模版</a>
                        <a href="#">首页</a>
                        <a href="#">个人简历</a>
                        <a href="#">装饰画</a>
                    </div>

                </div>
                <div>
                    <button type="button" class="submit"><span class="search-submit"></span></button>
                </div>
            </section>
        </div>
    </header>

    <!--轮播图  -->
    <div class="box">
        <div class="container box-info">
            <ul class="img-list">
                <li class="current"><a href="#"><img src="img2/banner01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img2/banner02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img2/banner03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img2/banner04.jpg" alt=""></a></li>
                <li><a href="#"><img src="img2/banner05.jpg" alt=""></a></li>
                <li><a href="#"><img src="img2/banner06.jpg" alt=""></a></li>
                <li><a href="#"><img src="img2/banner07.jpg" alt=""></a></li>
                <li><a href="#"><img src="img2/banner08.jpg" alt=""></a></li>
            </ul>

            <ul class="indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <a href="#" class="img-btn prev"></a>
        <a href="#" class="img-btn next"></a>

    </div>

    <main>
        <div class="main-one">
            <div>
                <span></span>
                <span>精选专题</span>
                <span>100万党建素材、PPT汇报模版无限下载、每天仅需0.18元立享VIP特权</span>
            </div>
            <div>
                <span>更多>></span>
            </div>
        </div>

        <div class="mian-two">

            <section class="two-first">
                <img src="./img2/jxzt01.jpg" alt="">
                <div class="corver"></div>
                <div class="corver-info">
                    <h3>爱的元素背景</h3>
                    <p>牛郎织女，鹊桥相会</p>
                </div>
            </section>
            <section class="two-first">
                <img src="./img2/jxzt01.jpg" alt="">
                <div class="corver"></div>
                <div class="corver-info">
                    <h3>爱的元素背景</h3>
                    <p>牛郎织女，鹊桥相会</p>
                </div>
            </section>
            <section class="two-first">
                <img src="./img2/jxzt01.jpg" alt="">
                <div class="corver"></div>
                <div class="corver-info">   
                    <h3>爱的元素背景</h3>
                    <p>牛郎织女，鹊桥相会</p>
                </div>
            </section>
            <section class="two-first">
                <img src="./img2/jxzt01.jpg" alt="">
                <div class="corver"></div>
                <div class="corver-info">
                    <h3>爱的元素背景</h3>
                    <p>牛郎织女，鹊桥相会</p>
                </div>
            </section>

        </div>

        <div class="main-three">
            <div>
                <span></span>
                <span>商用海报</span>
                <span>招聘海报</span>
                <span>配图海报</span>
                <span>企业文化</span>
                <span>促销海报</span>
                <span>原创插画</span>
            </div>
            <div>
                <span>更多>></span>
            </div>
        </div>

        <div class="mian-four">
            <section class="four-fourth">
                <img src="./img2/syhb03.jpg" alt="">
                <div class="corver2"></div>
                <div class="corver-info2">
                   <section class="p-word">
                        <div class="download"></div>
                        <p>75</p>
                    </section>
                    <section class="p-word">
                        <div class="heart"></div>
                        <p>45</p>
                    </section>
                </div>
            </section>

            <section class="four-fourth">
                <img src="./img2/syhb03.jpg" alt="">
                <div class="corver2"></div>
                <div class="corver-info2">
                      <section class="p-word">
                        <div class="download"></div>
                        <p>75</p>
                    </section>
                    <section class="p-word">
                        <div class="heart"></div>
                        <p>45</p>
                    </section>
                </div>
            </section>

            <section class="four-fourth">
                <img src="./img2/syhb03.jpg" alt="">
                <div class="corver2"></div>
                <div class="corver-info2">

                    <section class="p-word">
                        <div class="download"></div>
                        <p>75</p>
                    </section>
                    <section class="p-word">
                        <div class="heart"></div>
                        <p>45</p>
                    </section>

                </div>
            </section>

            <section class="four-fourth">
                <img src="./img2/syhb03.jpg" alt="">
                <div class="corver2"></div>
                <div class="corver-info2">
                    <seaction class="p-word">
                        <div class="download"></div>
                        <p>75</p>
                    </seaction>
                    <section class="p-word">
                        <div class="heart"></div>
                        <p>45</p>
                    </section>

                </div>
            </section>


        </div>
    </main>


    <footer class="footer">
        <div class="container-footer">

            <!-- <div class="clear"></div> -->
            <div class="footer-left">
                <ul class="ulli-word">
                    <h3>常见问题</h3>
                    <li>成为特邀设计师</li>
                    <li>成为原创贡献者</li>
                    <li>注册登录</li>
                    <li>帐号/密码</li>
                    <li>充值/售后</li>
                    <li>版权投诉</li>
                </ul>
                <ul class="ulli-word">
                    <h3>关于千图网</h3>
                    <li>关于我们</li>
                    <li>媒体报道</li>
                    <li>加入我们</li>
                    <li>心系千图</li>
                    <li>每日最新</li>
                </ul>
                <ul class="ulli-word">
                    <h3>产品服务</h3>
                    <li>官方微博</li>
                    <li>帮助中心</li>
                    <li>千图导航</li>
                </ul>
                <ul class="ulli-word">
                    <h3>友情链接</h3>
                    <li>我图网</li>
                    <li>千库网</li>
                    <li>摄图网</li>
                    <li>包图网</li>
                    <li>视达网</li>
                    <li>更多>></li>
                </ul>
            </div>
            <div class="footer-right">
                <ul>
                    <h3>客服咨询</h3>
                    <li><span></span>400-998-7011 （9:00-18:00</li>
                    <li><span></span>feedback@58pic.com</li>
                    <button type="button"><span></span>点击交谈</button>
                </ul>
            </div>
        </div>
    </footer>


    <div class="last-footer">
        <div class="footer-word">
            <section class="footerword-left">
                <span class="xinlang"></span>
                <span class="weixin"></span>
                <span>注册声明</span>
                <span>版权声明</span>
                <span>售后服务</span>
            </section>
            <section>
                <p>Copyright ©2013-2017 千图网 沪ICP备10011451号-6 上海工商&nbsp;安全实名验证&nbsp;信用网站
                </p>
            </section>
        </div>
    </div>


</body>

</html>
<script>
    var box = document.querySelector('.box');
    var imgLis = document.querySelectorAll('.img-list li');
    var indicatorLis = document.querySelectorAll('.indicator li');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var index = 0;
    var bgColorArr = ['#060606', '#feff0f', '#fdf100', '#2c9bff'
        , '#89dce3', '#fef8b3', '#110204', '#f4cad8'];
    function prevImg() {
        index = index == 0 ? index = imgLis.length - 1 : index - 1;
        showImg();
    }

    function nextImg() {
        index = index == imgLis.length - 1 ? 0 : index + 1;
        showImg();
    }
    //  展示图片函数
    function showImg() {
        for (var i = 0; i < imgLis.length; i++) {
            imgLis[i].className = '';
            indicatorLis[i].className = '';
        }
        console.log(index);
        imgLis[index].className = 'current';
        indicatorLis[index].className = 'active';
        box.style.backgroundColor = bgColorArr[index];
    }
    var timer = setInterval(nextImg, 1000);
    // 鼠标 按钮指示灯 控制图片
    for (var i = 0; i < indicatorLis.length; i++) {
        indicatorLis[i].index = i;
        indicatorLis[i].onclick = function () {
            index = this.index;
            showImg();
        }
    }
    //鼠标 进入容器图片停止效果
    box.onmouseover = function () {
        clearInterval(timer);
        timer = null;
        prev.style.display = 'block';
        next.style.display = 'block';
    }
    box.onmouseout = function () {
        if (timer != null) {
            return;
        }
        timer = setInterval(nextImg, 1000);

        prev.style.display = 'none';
        next.style.display = 'none';

    }
    prev.onclick = function () {
        prevImg();

    }
    next.onclick = function () {
        nextImg();
    }

</script>